/**
 *
 * Created by huotaol on 2017/5/10.
 */

import LoadingView from "../../../common/component/LoadingView";
import PropTypes from "prop-types";
import React, {Component} from "react";
import {
    Image,
    ListView,
    ScrollView,
    StyleSheet,
    Text,
    TouchableOpacity,
    TouchableWithoutFeedback,
    View
} from "react-native";
import CustomStyle from "../../../common/style/CustomStyle";
import {connect} from "react-redux";
import * as Url from "../../constant/Url";
import {request} from "../../../common/util/RequestUtil";
import ViewPager from "react-native-viewpager";
import {Actions} from "react-native-router-flux";
import BottomHandle from "./BottomHandle";
import Modal from "react-native-modal";
import AccreditDescription from "./AccreditDescription";
import * as AccredicConfig from "../../config/Accredit";
import * as StorageConstant from "../../constant/Storage";
import Util from "../../main/Util";
import CheckDescriptionItem from "./component/CheckDescriptionItem";


const DATA_SOURCE = new ViewPager.DataSource({
    pageHasChanged: (p1, p2) => p1 !== p2,
});

const LIST_DATA_SOURCE = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});

class CarDetail extends Component {
    // 构造
    constructor(props) {
        super(props);
        // 初始状态
        this.state = {
            loading: true,
            carInfo: {},
            picList: [],
            pageIndex: '',
            checkData: {},
            isModalVisible: false,
            accreditData: {},
        };
        this._requestBasicInfo = this._requestBasicInfo.bind(this);
        this._requestCheckList = this._requestCheckList.bind(this);
        this._renderAccredit = this._renderAccredit.bind(this);
        this._renderGuarantee = this._renderGuarantee.bind(this);
        this._renderCIAS = this._renderCIAS.bind(this);
        this._renderCheckItem = this._renderCheckItem.bind(this);
        this._renderPage = this._renderPage.bind(this);
        this._showAccredicData = this._showAccredicData.bind(this);
        this._renderCheckList = this._renderCheckList.bind(this);
    }

    componentDidMount() {
        console.log('CarDetail componentDidMount ' + JSON.stringify(this.props.data));
        this._requestBasicInfo();
        this._requestCheckList();
        const {data} = this.props;
        Util.saveData(StorageConstant.STORAGE_VIEW_CAR, Object.assign({}, data, {saveId: data.carid}));
    }

    render() {
        console.log('CarDetail render loading ' + this.state.loading);
        if (this.state.loading) {
            return <LoadingView/>
        }
        const carInfo = this.state.carInfo;

        const handelLine = [];
        handelLine.push({title: `${carInfo.meter}万公里`, content: '里程数'});
        handelLine.push({title: carInfo.firstDate, content: '上牌时间'});
        handelLine.push({title: carInfo.location, content: '车牌所在地'});
        handelLine.push({title: carInfo.ces, content: '排放标准'});
        handelLine.push({title: carInfo.gearBox, content: '变速箱'});
        handelLine.push({title: carInfo.displacement, content: '排放量'});

        return (
            <View style={{flex: 1}}>
                <ScrollView style={{flex: 1, backgroundColor: '#FFfcee',}}>
                    <View
                        style={[styles.viewPager, {
                            position: 'absolute',
                            left: 0,
                            top: 0,
                        }]}
                    >
                        <ViewPager
                            dataSource={DATA_SOURCE.cloneWithPages(this.state.picList)}
                            renderPage={this._renderPage}
                            isLoop={true}
                            onChangePage={(page => {
                                this.setState({pageIndex: `${page + 1}/${this.state.picList.length}`});
                            })}
                        />
                        <TouchableOpacity
                            style={[, {
                                position: 'absolute',
                                left: CustomStyle.getActualSizeInHorizontal(20),
                                top: CustomStyle.navBasePaddingTop + CustomStyle.getActualSizeInVertical(20),
                            }]}
                            onPress={() => {
                                Actions.pop();
                            }}
                        >
                            <Image source={require('../../../img/cardetail/back.png')}
                                   resizeMode={'contain'}
                                   style={{
                                       width: CustomStyle.getActualSizeInHorizontal(60),
                                       height: CustomStyle.getActualSizeInVertical(60),
                                   }}/>
                        </TouchableOpacity>

                    </View>

                    <View style={{marginTop: CustomStyle.getActualSizeInVertical(366),}}>
                        <View style={{flexDirection: 'row', justifyContent: 'space-between'}}>
                            <View style={[styles.imageTitleContainer, {}]}>
                                <Text
                                    style={[CustomStyle.baseText, styles.imageText, {}]}>{`车辆编号：${this.props.data.carid}`}</Text>
                            </View>
                            <View style={[styles.imageTitleContainer, {flexDirection: 'row',}]}>
                                <Image source={require('../../../img/cardetail/pic.png')}
                                       style={{
                                           width: CustomStyle.getActualSizeInHorizontal(20),
                                           height: CustomStyle.getActualSizeInVertical(23),
                                           resizeMode: 'center',
                                       }}/>
                                <Text
                                    style={[CustomStyle.baseText, styles.imageText, {marginLeft: CustomStyle.getActualSizeInHorizontal(10),}]}>{this.state.pageIndex}</Text>
                            </View>
                        </View>
                    </View>

                    <View style={[styles.basicInfoContainer]}>
                        {this._renderScore(carInfo)}

                        <Text style={[CustomStyle.baseText, {
                            fontSize: CustomStyle.getActualFontSize(30),
                            color: '#4a3d18',
                            alignSelf: 'center',
                            marginTop: CustomStyle.getActualSizeInVertical(70),
                        }]}>{carInfo.title}</Text>

                        <View
                            style={{
                                paddingLeft: CustomStyle.getActualSizeInHorizontal(38),
                                flexDirection: 'row',
                                alignItems: 'flex-end',
                            }}
                        >
                            <Text style={[CustomStyle.baseText, {
                                fontSize: CustomStyle.getActualFontSize(60),
                                color: '#ff2d22',
                                textAlignVertical: 'bottom',
                                fontWeight: 'bold',
                            }]}>{carInfo.price}<Text
                                style={{fontSize: CustomStyle.getActualFontSize(26)}}>万</Text></Text>

                            {this._renderReduce(carInfo.reducePrice)}
                        </View>

                        <View
                            style={[styles.basicInfoHandleContainer, {marginTop: CustomStyle.getActualSizeInVertical(58),}]}>
                            {handelLine.slice(0, 3).map(item => <BasicHandleCard style={[styles.basicInfoHandleItem]}
                                                                                 title={item.title}
                                                                                 subContent={item.content}/>)}
                        </View>
                        <View
                            style={[styles.basicInfoHandleContainer, {marginTop: CustomStyle.getActualSizeInVertical(58),}]}>
                            {handelLine.slice(3).map(item => <BasicHandleCard style={[styles.basicInfoHandleItem]}
                                                                              title={item.title}
                                                                              subContent={item.content}/>)}
                        </View>

                        <TouchableOpacity style={{
                            alignItems: 'center',
                            flexDirection: 'row',
                            height: CustomStyle.getActualSizeInVertical(88),
                            borderTopWidth: CustomStyle.getActualSizeInVertical(1),
                            borderTopColor: 'rgba(0,0,0,0.4)',
                            marginTop: CustomStyle.getActualSizeInVertical(40),
                            justifyContent: 'center',
                        }}
                                          onPress={() => {
                                              Actions.AllParam({carInfo: carInfo});
                                          }}
                        >
                            <Image source={require('../../../img/cardetail/all.png')} style={{
                                width: CustomStyle.getActualSizeInHorizontal(30),
                                height: CustomStyle.getActualSizeInVertical(20),
                                resizeMode: 'center',
                            }}/>
                            <Text style={[CustomStyle.baseText, {
                                fontSize: CustomStyle.getActualFontSize(28),
                                color: '#857e6e',
                                marginLeft: CustomStyle.getActualSizeInHorizontal(20),
                            }]}>全部参数</Text>
                        </TouchableOpacity>
                    </View>

                    <View >
                        {this._renderAccredit(carInfo)}
                    </View>

                    {this._renderCheckList(carInfo)}
                </ScrollView>
                <BottomHandle carInfo={carInfo}/>
                <TouchableWithoutFeedback onPress={() => {
                    this.setState({isModalVisible: false});
                }}>
                    <Modal isVisible={this.state.isModalVisible}
                           backdropOpacity={0.65}
                    >
                        <AccreditDescription data={this.state.accreditData}/>
                    </Modal>
                </TouchableWithoutFeedback>
            </View>
        );
    }

    _requestBasicInfo() {
        const {data} = this.props;
        const url = Url.BASE_URL + '/jishou/get_car_base_info';
        const param = new FormData();
        param.append('carid', data.carid);
        request(url, 'post', param).then(json => {
            console.log('basic info success');
            const pictures = json.data.pictures;
            const picPrefix = json.data.imgUrlPre;
            this.imgUrlPre = picPrefix;
            const picList = pictures.map(item => {
                return picPrefix + item[1];
            });
            this.setState({
                picList,
                loading: false,
                pageIndex: `1/${picList.length}`,
                carInfo: Object.assign({}, json.data, {carid: data.carid}),
            });
        }).catch(err => {
            console.log('basic info err  ' + err);
        });
    }

    _requestCheckList() {
        const url = Url.BASE_URL + '/jishou/get_car_attr';
        const {data} = this.props;
        const param = new FormData();
        param.append('carid', data.carid);
        console.log('check list id  ' + data.carid);
        request(url, 'post', param).then(json => {
            console.log('check list success  ' + JSON.stringify(json));
            const data = json.data;
            this.setState({checkData: data});
        }).catch(err => {
            console.log('check lisr err ' + err);
        });
    }

    _processCheckList(data) {
        const checkList = [];
        checkList.push({
            image: require('../../../img/cardetail/skeleton_small.png'),
            title: '车辆骨架',
            exceptionNum: data.frame.exc,
            normalNum: data.frame.comm,
            attrs: data.frame.attrs,
        });
        checkList.push({
            image: require('../../../img/cardetail/engin_small.png'), title: '发动机舱',
            exceptionNum: data.engine.exc,
            normalNum: data.engine.comm,
            attrs: data.engine.attrs,
        });
        checkList.push({
            image: require('../../../img/cardetail/start_small.png'), title: '启动检查',
            exceptionNum: data.start.exc,
            normalNum: data.start.comm,
            attrs: data.start.attrs,
        });
        checkList.push({
            image: require('../../../img/cardetail/driving_small.png'),
            title: '驾驶舱',
            exceptionNum: data.cab.exc,
            normalNum: data.cab.comm,
            attrs: data.cab.attrs,
        });
        checkList.push({
            image: require('../../../img/cardetail/underpan_small.png'),
            title: '底盘检查',
            exceptionNum: data.bottom.exc,
            normalNum: data.bottom.comm,
            attrs: data.bottom.attrs,
        });
        checkList.push({
            image: require('../../../img/cardetail/driving_test_small.png'),
            title: '路试检查',
            exceptionNum: data.road.exc,
            normalNum: data.road.comm,
            attrs: data.road.attrs,
        });
        checkList.push({
            image: require('../../../img/cardetail/outlook_small.png'),
            title: '车身外观',
            exceptionNum: data.body.exc,
            normalNum: data.body.comm,
            attrs: data.body.attrs,
        });
        checkList.push({
            image: require('../../../img/cardetail/unit_small.png'),
            title: '功能性零部件',
            exceptionNum: data.parts.exc,
            normalNum: data.parts.comm,
            attrs: data.parts.attrs,
        });
        return checkList;
    }


    _renderPage(pic) {
        return <TouchableOpacity
            style={[, {}]}
            onPress={() => {
                Actions.CarGallery({
                    carInfo: this.state.carInfo,
                    picList: this.state.picList,
                });
            }}
        >
            <Image style={[styles.viewPager]}
                   resizeMode={'cover'}
                   source={{uri: pic}}/>
        </TouchableOpacity>
    }

    _renderReduce(item) {
        if (item) {
            return <View style={{
                backgroundColor: 'white', borderWidth: CustomStyle.getActualSizeInHorizontal(2),
                borderRadius: CustomStyle.getActualSizeInHorizontal(4), borderColor: "#ff7200",
                height: CustomStyle.getActualSizeInVertical(38),
                marginLeft: CustomStyle.getActualSizeInHorizontal(20),
            }}>
                <Text style={[CustomStyle.baseText, {
                    fontSize: CustomStyle.getActualFontSize(),
                    color: '#ff7200',
                }]}>{item}</Text>
            </View>;
        }
    }


    _renderAccredit(carInfo) {
        let accredit = carInfo.isAccred;
        if (accredit === 2) {
            return <View style={[styles.guaranteeContainer, {}]}>
                {this._renderGuarantee()}
            </View>;
        } else if (accredit === 1) {
            return <View >
                <TouchableOpacity
                    onPress={() => {
                        this._showAccredicData({content: AccredicConfig.CIAS_DESCRIPTION});
                    }}
                    style={{
                        flexDirection: 'row',
                        height: CustomStyle.getActualSizeInVertical(88),
                        alignItems: 'center',
                        backgroundColor: '#f9f7f2',
                        marginLeft: CustomStyle.getActualSizeInHorizontal(20),
                        marginRight: CustomStyle.getActualSizeInHorizontal(20),
                        justifyContent: 'center',
                        borderBottomLeftRadius: CustomStyle.getActualSizeInHorizontal(20),
                        borderBottomRightRadius: CustomStyle.getActualSizeInHorizontal(20),
                    }}>
                    <Image source={require('../../../img/cardetail/logo_cias.png')}
                           resizeMode={'contain'}
                           style={{
                               position: 'absolute',
                               width: CustomStyle.getActualSizeInHorizontal(122),
                               height: CustomStyle.getActualSizeInVertical(57),
                               left: CustomStyle.getActualSizeInHorizontal(20),
                               top: CustomStyle.getActualSizeInVertical(15),
                           }}/>
                    <Text style={[CustomStyle.baseText, {
                        fontSize: CustomStyle.getActualFontSize(26),
                        color: '#4a3d18',
                    }]}>什么是CIAS?</Text>
                </TouchableOpacity>
                <View style={[styles.guaranteeContainer, {}]}>
                    {this._renderCIAS()}
                </View>
            </View>
        }
    }

    _renderScore(carInfo) {
        let accredit = carInfo.isAccred;
        if (accredit > 0) {
            return <Image source={require('../../../img/cardetail/score.png')} style={{
                position: 'absolute',
                left: CustomStyle.getActualSizeInHorizontal(20),
                top: 0,
                height: CustomStyle.getActualSizeInVertical(80),
                width: CustomStyle.getActualSizeInHorizontal(72),
                alignItems: 'center',
                paddingTop: CustomStyle.getActualSizeInVertical(8),
            }}><Text style={[CustomStyle.baseText, {
                fontSize: CustomStyle.getActualFontSize(30),
                color: 'white',
            }]}>{Math.floor(carInfo.score)}</Text></Image>
        }
    }

    _renderCheckList(carInfo) {
        return <View style={[styles.guaranteeContainer, {}]}>
            <GuaranteeTitle title='检测报告'/>
            <ListView
                renderSeparator={this._renderSeparator}
                dataSource={LIST_DATA_SOURCE.cloneWithRows(this._processCheckList(this.state.checkData))}
                renderRow={this._renderCheckItem}/>
        </View>
    }


    /*质保*/
    _renderGuarantee() {
        const handleCardList = [];
        handleCardList.push({
            image: require('../../../img/cardetail/engin.png'),
            content: '汽油发动机气缸体和内部润滑部件',
            click: () => {
                this._showAccredicData(AccredicConfig.GUARANTEE_PARAM[0]);
            },
        });
        handleCardList.push({
            image: require('../../../img/cardetail/gearbox.png'),
            content: '自动与手动变速器及变速箱体内的润滑部件',
            click: () => {
                this._showAccredicData(AccredicConfig.GUARANTEE_PARAM[1]);
            },
        });
        handleCardList.push({
            image: require('../../../img/cardetail/return.png'),
            content: '15天可退换', click: () => {
                this._showAccredicData(AccredicConfig.GUARANTEE_PARAM[2]);
            },
        });
        handleCardList.push({
            image: require('../../../img/cardetail/guarantee.png'),
            content: '1年2万公里质保',
            click: () => {
                this._showAccredicData(AccredicConfig.GUARANTEE_PARAM[3]);
            },
        });

        return <View >
            <GuaranteeTitle title={'质保证书'}/>
            <Image source={require('../../../img/cardetail/background_guarantee.png')}
                   style={{
                       width: CustomStyle.getActualSizeInHorizontal(710),
                       height: CustomStyle.getActualSizeInVertical(1100),
                       resizeMode: 'contain',
                       marginTop: CustomStyle.getActualSizeInVertical(40),
                   }}>

                <View style={{
                    marginLeft: CustomStyle.getActualSizeInHorizontal(100),
                    marginRight: CustomStyle.getActualSizeInHorizontal(100),
                    marginBottom: CustomStyle.getActualSizeInVertical(80),
                    marginTop: CustomStyle.getActualSizeInVertical(350),
                    flex: 1,
                }
                }>

                    <View style={{
                        alignItems: 'center',
                    }}>
                        <Text
                            style={[CustomStyle.baseText, {
                                fontSize: CustomStyle.getActualFontSize(36),
                                color: '#ff5e2c',
                                fontWeight: 'bold',
                            }]}>15天可退换</Text>
                        <Text
                            style={[CustomStyle.baseText, {
                                fontSize: CustomStyle.getActualFontSize(36),
                                color: '#ff5e2c',
                                fontWeight: 'bold',
                                marginTop: CustomStyle.getActualSizeInVertical(10),
                            }]}>一年2万公里质保</Text>
                    </View>

                    <Text
                        style={[CustomStyle.baseText, {
                            fontSize: CustomStyle.getActualFontSize(24),
                            color: '#4a3d18',
                            marginTop: CustomStyle.getActualSizeInVertical(20),
                        }]}>为了保障每一台车行家二手车的品质可靠，车行家要求认证二手车车源必须严格执行以下认证标准</Text>

                    <View style={[styles.guaranteeCardContainer]}>
                        {handleCardList.slice(0, 2).map(
                            item =>
                                <HandleCard
                                    imageStyle={[styles.guaranteeCardItemImage]}
                                    style={[styles.guaranteeCardItem,]}
                                    image={item.image}
                                    content={item.content} click={item.click}/>)}
                    </View>

                    <View style={[styles.guaranteeCardContainer]}>
                        {handleCardList.slice(2).map(
                            item =>
                                <HandleCard
                                    imageStyle={[styles.guaranteeCardItemImage]}
                                    style={[styles.guaranteeCardItem,]}
                                    image={item.image}
                                    content={item.content} click={item.click}/>)}
                    </View>

                    <Text style={[CustomStyle.baseText, {
                        fontSize: CustomStyle.getActualFontSize(20),
                        color: '#ffb29a',
                        marginTop: CustomStyle.getActualSizeInVertical(20),
                        textAlign: 'center',
                    }]}>车行家认证需要车辆通过复检并且成交后才可生效</Text>
                </View>
            </Image>
        </View>;
    }

    _renderCIAS() {
        const handleList = [];
        handleList.push({
            image: require('../../../img/cardetail/skeleton_big.png'), content: '骨架检查', click: () => {
                this._showAccredicData(AccredicConfig.CIAS_PARAM[0]);
            }
        });
        handleList.push({
            image: require('../../../img/cardetail/outlook_big.png'), content: '外观检查', click: () => {
                this._showAccredicData(AccredicConfig.CIAS_PARAM[1]);
            }
        });
        handleList.push({
            image: require('../../../img/cardetail/start_big.png'), content: '启动检查', click: () => {
                this._showAccredicData(AccredicConfig.CIAS_PARAM[4]);
            }
        });
        handleList.push({
            image: require('../../../img/cardetail/underpan_big.png'), content: '底盘检查', click: () => {
                this._showAccredicData(AccredicConfig.CIAS_PARAM[2]);
            }
        });
        handleList.push({
            image: require('../../../img/cardetail/driving_test_big.png'), content: '路试检查', click: () => {
                this._showAccredicData(AccredicConfig.CIAS_PARAM[5]);
            }
        });
        handleList.push({
            image: require('../../../img/cardetail/driving_big.png'), content: '驾驶舱', click: () => {
                this._showAccredicData(AccredicConfig.CIAS_PARAM[3]);
            }
        });
        handleList.push({
            image: require('../../../img/cardetail/engin_big.png'), content: '发动机', click: () => {
                this._showAccredicData(AccredicConfig.CIAS_PARAM[3]);
            }
        });
        handleList.push({
            image: require('../../../img/cardetail/unit_big.png'), content: '功能部件', click: () => {
                this._showAccredicData(AccredicConfig.CIAS_PARAM[3]);
            }
        });

        return <View >
            <GuaranteeTitle title={'认证证书'}/>
            <Image source={require('../../../img/cardetail/background_cias.png')}
                   style={{
                       width: CustomStyle.getActualSizeInHorizontal(710),
                       height: CustomStyle.getActualSizeInVertical(1100),
                       resizeMode: 'contain',
                       marginTop: CustomStyle.getActualSizeInVertical(40),
                   }}>

                <View style={{
                    marginBottom: CustomStyle.getActualSizeInVertical(80),
                    marginTop: CustomStyle.getActualSizeInVertical(350),
                    flex: 1,
                    alignItems: 'center',
                }
                }>

                    <View style={{
                        flexDirection: 'row', justifyContent: 'space-between',
                        alignSelf: 'stretch',
                        marginTop: CustomStyle.getActualSizeInVertical(20),
                        marginLeft: CustomStyle.getActualSizeInHorizontal(100),
                        marginRight: CustomStyle.getActualSizeInHorizontal(100),
                    }}>
                        <Text style={[CustomStyle.baseText, styles.ciasTitle,]}>无火烧</Text>
                        <Text style={[CustomStyle.baseText, styles.ciasTitle,]}>无水泡</Text>
                        <Text style={[CustomStyle.baseText, styles.ciasTitle,]}>无重大事故</Text>
                    </View>

                    <Text style={[CustomStyle.baseText, {
                        fontSize: CustomStyle.getActualFontSize(22),
                        color: '#4a3d18',
                        textAlign: 'center',
                        marginLeft: CustomStyle.getActualSizeInHorizontal(100),
                        marginRight: CustomStyle.getActualSizeInHorizontal(100),
                        marginTop: CustomStyle.getActualSizeInVertical(40),
                    }]}>为了保障每一台车行家二手车的品质可靠，车行家要求认证二手车车源必须严格执行以下认证标准</Text>

                    <View style={[styles.ciasCardContainer, {
                        marginLeft: CustomStyle.getActualSizeInHorizontal(50),
                        marginRight: CustomStyle.getActualSizeInHorizontal(50),
                    }]}>
                        {handleList.slice(0, 4).map(
                            item =>
                                <HandleCard
                                    imageStyle={[styles.ciasCardItemImage]}
                                    style={[styles.ciasCardItem,]}
                                    image={item.image}
                                    content={item.content} click={item.click}/>)}
                    </View>

                    <View style={[styles.ciasCardContainer, {
                        marginLeft: CustomStyle.getActualSizeInHorizontal(50),
                        marginRight: CustomStyle.getActualSizeInHorizontal(50),
                    }]}>
                        {handleList.slice(4).map(
                            item =>
                                <HandleCard
                                    imageStyle={[styles.ciasCardItemImage]}
                                    style={[styles.ciasCardItem,]}
                                    image={item.image}
                                    content={item.content} click={item.click}/>)}
                    </View>
                    <View style={{flex: 1, justifyContent: 'flex-end'}}>
                        <Text style={[CustomStyle.baseText, {
                            fontSize: CustomStyle.getActualFontSize(20),
                            color: '#ff7843',
                            marginTop: CustomStyle.getActualSizeInVertical(80),
                            alignSelf: 'center',
                        }]}>车行家认证需要车辆通过复检并且成交后才可生效</Text>
                    </View>
                </View>
            </Image>
        </View>
    }

    _renderSeparator() {
        return <View style={[CustomStyle.separator]}>

        </View>;
    }

    _renderCheckItem(item) {
        return <CheckDescriptionItem image={item.image} title={item.title} normalNum={item.normalNum}
                                     exceptionNum={item.exceptionNum}
                                     click={() => {
                                         Actions.CheckParamDetail({
                                             title: item.title,
                                             attrs: item.attrs,
                                             imagePrefix: this.imgUrlPre
                                         });
                                     }}
        />
    }

    _showAccredicData(data) {
        this.setState({isModalVisible: true, accreditData: data});
    }
}

class BasicHandleCard extends Component {
    static propTypes = {
        title: PropTypes.string,
        subContent: PropTypes.string,
        click: PropTypes.func,
    };
    // 构造
    constructor(props) {
        super(props);
        // 初始状态
        this.state = {};
    }

    render() {
        return (
            <TouchableOpacity
                style={this.props.style}
                onPress={this.props.click}>
                <Text
                    numberOfLines={1}
                    style={[CustomStyle.baseText, {
                        fontSize: CustomStyle.getActualFontSize(30),
                        color: '#4a3d18',
                    }]}>{this.props.title}</Text>
                <Text
                    style={[CustomStyle.baseText, {
                        fontSize: CustomStyle.getActualFontSize(24),
                        color: '#857e6e',
                        marginTop: CustomStyle.getActualSizeInVertical(20),
                    }]}>{this.props.subContent}</Text>
            </TouchableOpacity>
        );
    }
}

class GuaranteeTitle extends Component {
    static propTypes = {
        title: PropTypes.string,
    };

    render() {
        return (
            <View style={[this.props.style, {flexDirection: 'row', alignItems: 'center',}]}>
                <View style={{
                    width: CustomStyle.getActualSizeInHorizontal(8),
                    height: CustomStyle.getActualSizeInVertical(28),
                    backgroundColor: '#ff7200',
                }}/>
                <Text style={[CustomStyle.baseText, {
                    fontSize: CustomStyle.getActualFontSize(30),
                    color: '#ff7200',
                    marginLeft: CustomStyle.getActualSizeInHorizontal(20),
                }]}>{this.props.title}</Text>
            </View>
        );
    }
}

class HandleCard extends Component {
    static propTypes = {
        image: PropTypes.any,
        content: PropTypes.string,
        click: PropTypes.func,
        imageStyle: View.propTypes.style,
    };

    render() {
        return (
            <TouchableOpacity
                onPress={this.props.click}
                style={[this.props.style, {
                    flexDirection: 'row',
                    alignItems: 'flex-end',
                    flex: 1,
                    justifyContent: 'center'
                }]}>

                <View style={{alignItems: 'center'}}>
                    <Image
                        resizeMode={'contain'}
                        source={this.props.image}
                        style={[this.props.imageStyle,]}/>
                    <Text
                        numberOfLines={1}
                        style={[CustomStyle.baseText, {
                            fontSize: CustomStyle.getActualFontSize(22),
                            color: '#8c7a44',
                            textAlignVertical: 'bottom',
                            marginTop: CustomStyle.getActualSizeInVertical(11),
                        }]}>{this.props.content}</Text>
                </View>

                <Image source={require('../../../img/cardetail/arrow_right_small.png')}
                       style={{
                           width: CustomStyle.getActualSizeInHorizontal(8),
                           height: CustomStyle.getActualSizeInVertical(15),
                           resizeMode: 'contain',
                           marginLeft: CustomStyle.getActualSizeInHorizontal(11),
                           marginBottom: CustomStyle.getActualSizeInVertical(4),
                       }}/>

            </TouchableOpacity>
        );
    }
}

const styles = StyleSheet.create({
    imageTitleContainer: {
        backgroundColor: '#333333',
        borderRadius: CustomStyle.getActualSizeInVertical(20),
        height: CustomStyle.getActualSizeInVertical(40),
        alignItems: 'center',
        justifyContent: 'center',
        paddingLeft: CustomStyle.getActualSizeInHorizontal(20),
        paddingRight: CustomStyle.getActualSizeInHorizontal(20),
        paddingTop: CustomStyle.getActualSizeInVertical(8),
        paddingBottom: CustomStyle.getActualSizeInVertical(8),
    },
    imageText: {
        fontSize: CustomStyle.getActualFontSize(24),
        color: 'white',
    },
    viewPager: {
        width: CustomStyle.screenWidth,
        height: CustomStyle.getActualSizeInVertical(500),
    },
    basicInfoContainer: {
        backgroundColor: 'white',
        borderTopLeftRadius: CustomStyle.getActualSizeInHorizontal(20),
        borderTopRightRadius: CustomStyle.getActualSizeInHorizontal(20),
        marginLeft: CustomStyle.getActualSizeInHorizontal(20),
        marginRight: CustomStyle.getActualSizeInHorizontal(20),
        marginTop: CustomStyle.getActualSizeInVertical(20),
    },
    basicInfoHandleContainer: {
        flexDirection: 'row',
    },
    basicInfoHandleItem: {
        flex: 1,
        alignItems: 'center',
    },
    guaranteeContainer: {
        backgroundColor: 'white',
        paddingTop: CustomStyle.getActualSizeInVertical(40),
        paddingLeft: CustomStyle.getActualSizeInHorizontal(20),
        paddingRight: CustomStyle.getActualSizeInHorizontal(20),
        paddingBottom: CustomStyle.getActualSizeInVertical(40),
        marginTop: CustomStyle.getActualSizeInVertical(20),
    },
    guaranteeCardContainer: {
        flexDirection: 'row',
        marginTop: CustomStyle.getActualSizeInVertical(30),
    },
    guaranteeCardItem: {
        flex: 1,
        alignItems: 'center',
        paddingLeft: CustomStyle.getActualSizeInHorizontal(16),
        paddingRight: CustomStyle.getActualSizeInHorizontal(16),
    },
    guaranteeCardItemImage: {
        width: CustomStyle.getActualSizeInHorizontal(120),
        height: CustomStyle.getActualSizeInVertical(120),
    },

    ciasTitle: {
        fontSize: CustomStyle.getActualFontSize(36),
        color: "#ff5e2c",
        fontWeight: 'bold',
    },
    ciasCardContainer: {
        flexDirection: 'row',
        marginTop: CustomStyle.getActualSizeInVertical(60),
    },
    ciasCardItem: {
        flex: 1,
        alignItems: 'center',
        paddingLeft: CustomStyle.getActualSizeInHorizontal(16),
        paddingRight: CustomStyle.getActualSizeInHorizontal(16),
    },
    ciasCardItemImage: {
        width: CustomStyle.getActualSizeInHorizontal(80),
        height: CustomStyle.getActualSizeInVertical(80),
    },
});

export default connect()(CarDetail);

